<template>
    <div class="login-container">
      <h2>登录</h2>
      <div v-if="loginType === 'password'">
        <label for="usernameOrPhone">用户名或手机号:</label>
        <input type="text" id="usernameOrPhone" v-model="usernameOrPhone" />
        <br />
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <div v-if="loginType === 'verificationCode'">
        <label for="usernameOrPhone">用户名或手机号:</label>
        <input type="text" id="usernameOrPhone" v-model="usernameOrPhone" />
        <br />
        <label for="verificationCode">验证码:</label>
        <input type="text" id="verificationCode" v-model="verificationCode" />
        <button @click="getVerificationCode">获取验证码</button>
      </div>
      <button @click="switchLoginType('password')">密码登录</button>
      <button @click="switchLoginType('verificationCode')">使用手机验证码登录</button>
      <button @click="cancel">取消</button>
      <button @click="login">登录</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        usernameOrPhone: '',
        password: '',
        verificationCode: '',
        loginType: 'password'
      };
    },
    methods: {
      switchLoginType(type) {
        this.loginType = type;
      },
      getVerificationCode() {
        // 这里可以添加获取验证码的逻辑，例如调用后端接口等
        alert('获取验证码逻辑待实现');
      },
      cancel() {
        // 这里可以添加取消登录的逻辑，例如清除输入等
        this.usernameOrPhone = '';
        this.password = '';
        this.verificationCode = '';
        this.loginType = 'password';
      },
      login() {
        if (this.loginType === 'password') {
          // 这里添加密码登录的逻辑，例如调用后端登录接口，发送用户名或手机号和密码进行验证
          alert(`使用密码登录，用户名或手机号: ${this.usernameOrPhone}, 密码: ${this.password}`);
        } else if (this.loginType === 'verificationCode') {
          // 这里添加验证码登录的逻辑，例如调用后端登录接口，发送用户名或手机号和验证码进行验证
          alert(`使用验证码登录，用户名或手机号: ${this.usernameOrPhone}, 验证码: ${this.verificationCode}`);
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .login-container {
    border: 1px solid #ccc;
    padding: 20px;
    width: 300px;
    margin: 0 auto;
  }
  </style>
  